
	Ext.namespace("panel.widgets.sidebar");
	
	panel.widgets.sidebar = function(config) {
		
		var state  = {}; 
		var widget = {};
		
		var config = Ext.value(config, {});
		config.glamur = Ext.value(config.glamur, true);
		config.region = Ext.value(config.region, "east");
		
		widget.observer = new Ext.util.Observable();
		
		widget.observer.addEvents({
			
			"init"    : true,
			"refresh" : true
			
		});
		
		$H(config.listeners).each( function(f, e) {
			
			widget.observer.on(e, f);
			
		});
		
		// API
		widget.getObserver = function() { return widget.observer; }
		widget.getPanel    = function() { return widget.panel; };
		widget.refresh     = function() { widget.observer.fireEvent("refresh"); }
		
		var tpl = {
		
			html:  [],
			items: []
			
		};
		
		if( config.getInfo instanceof Function ) {
			
			var info = {};
			
			widget.getInfo = config.getInfo;
			
			info.id = Ext.id();
			
			tpl.html.push(
				"<div id='", info.id ,"' class='panel_widgets_sidebar_info bg_glamur'>",
				"</div>"
			);
			
			widget.observer.on("refresh", function() {
				
				Ext.get(info.id).update( widget.getInfo() );
				
			});
			
		}	// if
		
		if( config.items ) {
		
			var items = {};
			var processing = {
				
				raw: false
				
			};
			
			items.map = {};
			items.id  = Ext.id();
		
			tpl.html.push("<table id='", items.id, "' class='panel_widgets_sidebar_items'>");
		
			config.items.each( function(item) {
				
				if( !processing.raw ) {
					tpl.html.push("<tr>"); }
				
				switch( true ) {
					
				case ( item == "-" ):
					
					tpl.html.push("<td class='panel_widgets_sidebar_item_delimeter'></td>");
					
					break;
				
				case ( typeof(item) == "string" ):
					
					if( !processing.raw ) {
					
						tpl.html.push("<td class='panel_widgets_sidebar_item_text'>", item, "</td>");
					
					} else {
						
						tpl.html.push(item);
						
					}	// if
					
					break;
					
				case ( item instanceof Ext.Button ):
				case ( item instanceof Ext.form.Field ):
					
					if( !processing.raw ) {
					
						if( item.align && !item.fieldLabel ) {
							
							tpl.html.push("<td class='panel_widgets_sidebar_item' align='" + item.align + "'>");
							
						} else {
							
							tpl.html.push("<td class='panel_widgets_sidebar_item'>");
							
						}	// if
						
						if( item.fieldLabel ) {
							
							tpl.html.push(
								"<table class='panel_widgets_sidebar_split'>",
								"<td class='panel_widgets_sidebar_item_label'>",
								"{[values.", (item.id || item.name), ".fieldLabel]}",
								"</td>"
							);
							
							if( item.align ) {
							
								tpl.html.push("<td class='panel_widgets_sidebar_item' align='" + item.align + "'>");
								
							} else {
								
								tpl.html.push("<td class='panel_widgets_sidebar_item'>");
								
							}	// if
							
							tpl.html.push(
								"{", (item.id || item.name), ":field}",
								"</td>",
								"</table>"
							);
							
						} else {
							
							tpl.html.push("{", (item.id || item.name), ":field}");
							
						}	// if
						
						tpl.html.push("</td>");
						
					} else {
						
						tpl.html.push("{", (item.id || item.name), ":field}");
					
					}	// if
					
					tpl.items.push(item);
					
					items.map[(item.id || item.name)] = item;
					
					break;
					
				case ( item instanceof Object ):
				
					if( !processing.raw ) {
						tpl.html.push("<td>"); }
				
					switch( item.type ) {
						
					case "html":
						tpl.html.push(item.html);
						break;
						
					case "<block>":
						tpl.html.push("<table class='panel_widgets_block'>");
						break;
						
					case "<block2>":
						tpl.html.push("<table class='panel_widgets_block2 bg_glamur'>");
						break;
						
					case "</block>":
						tpl.html.push("</table>");
						break;
						
					case "<raw>":
						processing.raw = true;
						break;
						
					case "</raw>":
						processing.raw = false;
						break;
						
					case "dynamic":
					
						var _el = Ext.id();
						
						tpl.html.push("<div id='" + _el + "'></div>");
					
						widget.observer.on("refresh", function() {
				
							Ext.get(_el).update( item.callback() );
							
						});	
					
						break;
						
					default:
						throw "Unknown item";
						break;
						
					}	// if
					
					if( !processing.raw ) {
						tpl.html.push("</td>"); }
				
					break;
					
				default:
					throw "Unknown item";
					break;
					
				}	// switch
				
				if( !processing.raw ) {
					tpl.html.push("</tr>"); }
				
			});
			
			tpl.html.push("</table>");
			
			if( config.processItemsStatus ) {
				
				widget.observer.on("refresh", function() {
					
					config.processItemsStatus(items.map);
					
				});
				
			}
			
		};
		
		widget.panel = new Ext.Panel({
			
			renderTo   : Ext.value(config.renderTo, undefined),
			height     : Ext.value(config.height, undefined),  
			width      : Ext.value(config.width, 200),
			height     : Ext.value(config.height, undefined),
			region     : config.region,
			layout     : "template",
			split      : Ext.value(config.split, true),
			border     : false,
			frame      : false,
			autoWidth  : Ext.value(config.autoWidth, undefined),
			autoScroll : true,
			monitorResize : true,
			
			tpl:   tpl.html.join(""),
			items: tpl.items,
			
			listeners: {
			
				render: function(me) {

					me.getEl().addClass("panel_widgets_sidebar");
					
					if( config.region ) {
						me.getEl().addClass("panel_widgets_sidebar_region_" + config.region); }
					
					if( config.glamur ) {
						me.body.addClass("bg_glamur"); }
					
				},
				
				afterLayout: function() {
					
					/**
					 * 1. Do init.
					 * 2. Avoid reinitialization if defined 
					**/

					if( !state.init ) {
						
						state.init = true;
						
						widget.observer.fireEvent("init", widget);
						widget.observer.fireEvent("refresh");
						
						
					}
					
				}
				
			}	
						
		});
		
		return widget;
		
	};
